﻿$(function () {

    GetPolls();

    function GetPolls() {

        var serviceUrl = "http://" + document.location.host + "/PollServices.svc/GetPolls";

        $.getJSON(serviceUrl, function (data) {

            var content = $(".content");
            var html = "";
            for (var poll in data) {
                if (poll / 3 == 0) {
                    html += "<div class='row'>"
                }
                html += "<div class='cell'><div class='poll' id='" + data[poll].pQuestion + "' class='question" + poll +
                        "' >" + data[poll].pQuestion + "<ul class='answerList'>";
                for (var answer in data[poll].pAnswers) {
                    html += "<li><input id='q" + poll + "a" + answer + "' type='radio' name='question" + poll +
                        "' value='" + data[poll].pAnswers[answer]
                         + "' /> <label for='q" + poll + "a" + answer + "'>" + data[poll].pAnswers[answer]
                         + "</label></li>";
                    if (answer == data[poll].pAnswers.length - 1) {

                        html += "</ul>" + "<button id='" + poll +
                        "' class='vote'>Vote</button><div class='clearer'></div></div></div>";
                    }
                }
                if ((poll % 3) == 2) {
                    html += "</div>"
                }
                if (poll == data.length - 1) {

                    html += "<div class='clearer'></div>";
                }

            }
            content.html(html);
        });
    }
    $('.vote').live("click",
      function Vote() {
          var id = "question" + $(this).attr("id");
          var answer = $("input[name='" + id + "']:checked").val();
          var question = $(this).parent().attr("id");
          var serviceUrl = "http://" + document.location.host + "/PollServices.svc/GetVotes";
          var vote = new Object();
          vote.Question = question;
          vote.Answer = answer;
          var voteJson = JSON.stringify(vote);
          $.ajax({
              type: 'POST',
              async: true,
              url: serviceUrl,
              data: voteJson,
              datatype: 'JSON',
              contentType: "application/json; charset=utf-8",
              success: function (response) {
                  var header = $("#header");
                  var text = "Poll System – Results";
                  header.text(text);
                  var content = $(".content");
                  var html = "";
                  html += "<div id='results'>";
                  html += "<h3>" + question + "</h3>";
                  for (var answer in response) {
                      html += "<div class='answer'>";
                      html += "<div class='text'>" + response[answer].Text + "</div>";
                      html += "<div class='percentage' style='width:" + response[answer].Votes * 4 + "px;'>" + response[answer].Votes + "%</div>";
                      html += "</div>";
                      html += "<div class='clearer'></div>";

                  }


                  html += "</div>";
                  html += "<button id='back'>&larr; Back to Polls</button>"
                  content.html(html);
              }
          });

      });
    $('#back').live("click",
      function Back() {
          var header = $("#header");
          var text = "Poll System – Welcome";
          header.text(text);
          GetPolls();
      });

});